<template>
    <FormProvider :form="form">
      <Form layout="vertical">
        <Field
          name="name"
          title="Name"
          required
          :decorator="[FormItem]"
          :component="[Input, { placeholder: 'Please Input' }]"
        />
        <FormConsumer>
          <template #default="{ form }">
            <div style="white-space: pre; margin-bottom: 16px">
              {{ JSON.stringify(form.values, null, 2) }}
            </div>
            <Button type="primary" @click="form.submit(log)">
              Submit
            </Button>
          </template>
        </FormConsumer>
      </Form>
    </FormProvider>
  </template>
  
  <script setup>
  import { ref, h } from 'vue';
  import { Form, Input, Button } from 'ant-design-vue';
  import { createForm, setValidateLanguage } from '@formily/core';
  import { FormProvider, FormConsumer, Field, useField } from '@formily/vue';
  
  // 设置验证语言为英文
  setValidateLanguage('en');
  
  // 定义 FormItem 组件
  const FormItem = {
    setup(props, { slots }) {
      const field = useField();
      return () => h(
        Form.Item,
        {
          label: field.value.title,
          required: field.value.required,
          help: field.value.selfErrors?.length ? field.value.selfErrors : undefined,
          extra: field.value.description,
          validateStatus: field.value.validateStatus
        },
        slots.default()
      );
    }
  };
  
  // 创建表单实例
  const form = ref(createForm({ validateFirst: true }));
  
  // 定义日志函数
  const log = (...args) => {
    console.log(...args);
  };
  </script>